<template>
  <div id="CarDetail">
    <v-header3 :title="detail.carModelName"></v-header3>
    <v-carSwipe
      :title="detail.carModelName"
      :standardImgs="detail.standardImgs"
      :registerTime="detail.registerTime"
      :carCityName="detail.carCityName"
      :retailPrice="detail.retailPrice"
      :videos="detail.videos"
    ></v-carSwipe>
    <v-priceInfo
      :totalPrice="detail.totalPrice"
      :downPayment="detail.downPayment"
      :save="detail.save"
    ></v-priceInfo>
    <v-vehicleDetails
      :displacement="detail.displacement"
      :mileage="detail.mileage"
      :fuelType="detail.fuelType"
      :color="detail.color"
      :insuranceTime="detail.insuranceTime"
      :dischargeLevelWord="detail.dischargeLevelWord"
      :vehicleType="detail.vehicleType"
      :manufacturerName="detail.manufacturerName"
      :transmission="detail.transmission"
    ></v-vehicleDetails>
    <v-describe :carConditions="detail.carConditions"></v-describe>
    <v-modelShop v-if='detail.carDealerStore!==null'  :carDealerStore="detail.carDealerStore" :miniStoreId="detail.miniStoreId"></v-modelShop>
    <v-similar></v-similar>
    <v-recommend></v-recommend>
    <v-carFooter></v-carFooter>
  </div>
</template>
<script>
import {} from "element-ui";
import vHeader3 from "../components/common/Header3";
import vCarSwipe from "../components/CarDetail/CarSwipe";
import vPriceInfo from "../components/CarDetail/PriceInfo";
import vVehicleDetails from "../components/CarDetail/VehicleDetails";
import vDescribe from "../components/CarDetail/Describe";
import vModelShop from "../components/CarDetail/ModelShop";
import vSimilar from "../components/CarDetail/Similar";
import vRecommend from "../components/index/Recommend";
import vCarFooter from "../components/CarDetail/CarFooter";
import { postReq } from "../assets/js/api";
import dict from "../assets/js/utils";
export default {
  name: "CarDetail",
  data() {
    return {
      orderId: this.$route.query.orderId | "",
      detail: {
        askCount: 0,
        bindStatus: 0,
        brandId: 0,
        buyType: 0,
        carCityName: "",
        save: 0,
        carConditions: [
          {
            content: "",
            title: ""
          }
        ],
        carDealerStore: {
          onSaleCarNum: 0,
          storeAddress: "",
          storeHeadUrl: "",
          storeId: "",
          storeName: ""
        },
        carDescribe: "",
        carDetailsShareUrl: "",
        carModelName: "",
        color: "",
        defectImgs: [
          {
            des: "",
            fileUrl: "",
            imgId: 0,
            isFirst: 0
          }
        ],
        dischargeLevel: 0,
        displacement: "",
        downPayment: 0,
        fuelType: "",
        goodsIsUser: 0,
        goodsStatus: 0,
        id: 0,
        insuranceTime: "",
        isCollect: 0,
        isEnquiry: 0,
        jobPhone: "",
        jobStatus: 0,
        mainCarGrade: "",
        manufacturerName: "",
        manufacturers: 0,
        mileage: 0,
        miniStoreId: 0,
        orderNo: "",
        orderType: 0,
        registerTime: "",
        repairContent: "",
        repairPrice: 0,
        retailPrice: 0,
        standardImgs: [
          {
            des: "",
            fileUrl: "",
            imgId: 0,
            isFirst: 0
          }
        ],
        totalPrice: 0,
        transferCount: 0,
        transmission: "",
        updateTime: "",
        userPhone: "",
        userRongCloudVo: {
          rongCloudToken: "",
          rongCloudUserId: "",
          userHeadUrl: "",
          userNickName: ""
        },
        vehicleType: "",
        videos: [
          {
            fileUrl: "",
            thumbnailUrl: "",
            videoId: 0
          }
        ],
        vin: ""
      }
    };
  },
  components: {
    vHeader3,
    vCarSwipe,
    vCarFooter,
    vPriceInfo,
    vVehicleDetails,
    vDescribe,
    vModelShop,
    vSimilar,
    vRecommend
  },

  methods: {
    // 获取推荐车辆
    getCarDetail() {
      var that = this;
      var params = {
        orderId: that.orderId,
        token: ""
      };
      postReq("/b2c/goods/info", params).then(res => {
        let { errcode, content, message } = res;
        if (errcode == 0) {
          that.detail = content;
          that.detail.dischargeLevelWord =
            dict.dischargeLevel[that.detail.dischargeLevel];
          that.detail.vehicleType = dict.vehicleType[that.detail.vehicleType];
          that.detail.fuelType = dict.fuelType[that.detail.fuelType];
          that.detail.transmission =
            dict.transmission[that.detail.transmission];
          that.detail.color = dict.carColor[that.detail.color];
          that.detail.save =
            parseInt(that.detail.totalPrice) -
            parseInt(that.detail.retailPrice);
        } else {
          this.$toast({
            message: message
          });
        }
      });
    }
  },
  created() {
  
  },
  mounted() {
    this.getCarDetail();
  },
  watch: {
    $route(to, from) {
      //监听路由是否变化
      if (this.$route.query.orderId) {
       this.orderId=this.$route.query.orderId
        this.getCarDetail();
      }
    }
  }
};
</script>
<style type="text/css" lang='scss'>
#CarDetail {
  padding-bottom: 46px;
}
</style>


